import React, { useState } from 'react'
import { 
  BarChart3, 
  Target, 
  TrendingUp, 
  TrendingDown,
  Plus,
  Download,
  Filter,
  Search,
  Calendar,
  CheckCircle,
  AlertTriangle,
  Award,
  Users,
  Leaf,
  Shield,
  Building
} from 'lucide-react'
import { RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, BarChart, Bar } from 'recharts'

// Mock数据
const esgScores = {
  environmental: 78,
  social: 82,
  governance: 85,
  overall: 81.7
}

const radarData = [
  { dimension: '环境管理', score: 78, fullMark: 100 },
  { dimension: '气候变化', score: 75, fullMark: 100 },
  { dimension: '资源利用', score: 82, fullMark: 100 },
  { dimension: '生物多样性', score: 70, fullMark: 100 },
  { dimension: '员工权益', score: 85, fullMark: 100 },
  { dimension: '社区关系', score: 80, fullMark: 100 },
  { dimension: '供应链管理', score: 78, fullMark: 100 },
  { dimension: '公司治理', score: 88, fullMark: 100 },
  { dimension: '风险管理', score: 82, fullMark: 100 },
  { dimension: '透明度', score: 85, fullMark: 100 },
]

const trendData = [
  { month: '1月', environmental: 75, social: 78, governance: 82 },
  { month: '2月', environmental: 76, social: 79, governance: 83 },
  { month: '3月', environmental: 77, social: 80, governance: 84 },
  { month: '4月', environmental: 76, social: 81, governance: 85 },
  { month: '5月', environmental: 77, social: 82, governance: 85 },
  { month: '6月', environmental: 78, social: 82, governance: 85 },
]

const benchmarks = [
  { company: '行业平均', environmental: 72, social: 75, governance: 78, overall: 75 },
  { company: '标杆企业A', environmental: 85, social: 88, governance: 90, overall: 87.7 },
  { company: '标杆企业B', environmental: 82, social: 85, governance: 87, overall: 84.7 },
  { company: '本企业', environmental: 78, social: 82, governance: 85, overall: 81.7 },
]

const improvementAreas = [
  {
    id: 1,
    dimension: '环境管理',
    currentScore: 78,
    targetScore: 85,
    priority: 'high',
    actions: [
      '建立环境管理体系',
      '制定环境政策',
      '开展环境培训'
    ]
  },
  {
    id: 2,
    dimension: '气候变化',
    currentScore: 75,
    targetScore: 80,
    priority: 'medium',
    actions: [
      '制定碳减排目标',
      '实施节能措施',
      '开展碳足迹评估'
    ]
  },
  {
    id: 3,
    dimension: '生物多样性',
    currentScore: 70,
    targetScore: 75,
    priority: 'low',
    actions: [
      '评估生物多样性影响',
      '制定保护措施',
      '建立监测机制'
    ]
  }
]

const quickStats = [
  { title: 'ESG综合评分', value: '81.7', unit: '分', change: '+2.3', trend: 'up', icon: Award, color: 'text-green-600' },
  { title: '环境维度', value: '78', unit: '分', change: '+1.5', trend: 'up', icon: Leaf, color: 'text-blue-600' },
  { title: '社会维度', value: '82', unit: '分', change: '+2.1', trend: 'up', icon: Users, color: 'text-purple-600' },
  { title: '治理维度', value: '85', unit: '分', change: '+1.8', trend: 'up', icon: Building, color: 'text-orange-600' },
]

function ESGEvaluationMain() {
  const [activeTab, setActiveTab] = useState('overview')
  const [filter, setFilter] = useState('all')

  const getPriorityColor = (priority) => {
    switch (priority) {
      case 'high': return 'text-red-600 bg-red-50'
      case 'medium': return 'text-yellow-600 bg-yellow-50'
      case 'low': return 'text-green-600 bg-green-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  const getPriorityText = (priority) => {
    switch (priority) {
      case 'high': return '高优先级'
      case 'medium': return '中优先级'
      case 'low': return '低优先级'
      default: return '未知'
    }
  }

  return (
    <div className="p-6 space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">ESG评估</h1>
          <p className="text-gray-600">多维度ESG绩效评估与对标分析</p>
        </div>
        <div className="flex items-center space-x-3">
          <button className="flex items-center px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
            <Download className="w-4 h-4 mr-2" />
            导出报告
          </button>
          <button className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
            <Plus className="w-4 h-4 mr-2" />
            新建评估
          </button>
        </div>
      </div>

      {/* 快速统计 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {quickStats.map((stat) => {
          const Icon = stat.icon
          return (
            <div key={stat.title} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">{stat.title}</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {stat.value}
                    <span className="text-sm font-normal text-gray-500 ml-1">{stat.unit}</span>
                  </p>
                </div>
                <div className="w-12 h-12 bg-gray-50 rounded-lg flex items-center justify-center">
                  <Icon className={`w-6 h-6 ${stat.color}`} />
                </div>
              </div>
              <div className="mt-2 flex items-center">
                {stat.trend === 'up' ? (
                  <TrendingUp className="w-4 h-4 text-green-600 mr-1" />
                ) : (
                  <TrendingDown className="w-4 h-4 text-red-600 mr-1" />
                )}
                <span className={`text-sm font-medium ${
                  stat.trend === 'up' ? 'text-green-600' : 'text-red-600'
                }`}>
                  {stat.change}
                </span>
                <span className="text-sm text-gray-500 ml-1">vs 上月</span>
              </div>
            </div>
          )
        })}
      </div>

      {/* 标签页导航 */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200">
        <div className="border-b border-gray-200">
          <nav className="flex space-x-8 px-6">
            {[
              { id: 'overview', name: '概览' },
              { id: 'assessment', name: '评估详情' },
              { id: 'benchmarking', name: '对标分析' },
              { id: 'improvement', name: '改进建议' },
              { id: 'reports', name: '报告' }
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab === tab.id
                    ? 'border-green-500 text-green-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                {tab.name}
              </button>
            ))}
          </nav>
        </div>

        <div className="p-6">
          {/* 概览标签页 */}
          {activeTab === 'overview' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* 雷达图 */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">ESG维度雷达图</h3>
                  <ResponsiveContainer width="100%" height={400}>
                    <RadarChart data={radarData}>
                      <PolarGrid />
                      <PolarAngleAxis dataKey="dimension" />
                      <PolarRadiusAxis angle={90} domain={[0, 100]} />
                      <Radar name="ESG评分" dataKey="score" stroke="#10B981" fill="#10B981" fillOpacity={0.3} />
                      <Tooltip />
                    </RadarChart>
                  </ResponsiveContainer>
                </div>

                {/* 趋势图 */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">ESG评分趋势</h3>
                  <ResponsiveContainer width="100%" height={400}>
                    <LineChart data={trendData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <Tooltip />
                      <Line type="monotone" dataKey="environmental" stroke="#10B981" strokeWidth={2} name="环境" />
                      <Line type="monotone" dataKey="social" stroke="#3B82F6" strokeWidth={2} name="社会" />
                      <Line type="monotone" dataKey="governance" stroke="#8B5CF6" strokeWidth={2} name="治理" />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              </div>
            </div>
          )}

          {/* 评估详情标签页 */}
          {activeTab === 'assessment' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* 环境维度 */}
                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-lg font-semibold text-gray-900">环境维度</h3>
                    <div className="text-2xl font-bold text-green-600">{esgScores.environmental}分</div>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">环境管理</span>
                      <span className="text-sm font-medium">78分</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">气候变化</span>
                      <span className="text-sm font-medium">75分</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">资源利用</span>
                      <span className="text-sm font-medium">82分</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">生物多样性</span>
                      <span className="text-sm font-medium">70分</span>
                    </div>
                  </div>
                </div>

                {/* 社会维度 */}
                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-lg font-semibold text-gray-900">社会维度</h3>
                    <div className="text-2xl font-bold text-blue-600">{esgScores.social}分</div>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">员工权益</span>
                      <span className="text-sm font-medium">85分</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">社区关系</span>
                      <span className="text-sm font-medium">80分</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">供应链管理</span>
                      <span className="text-sm font-medium">78分</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">产品责任</span>
                      <span className="text-sm font-medium">85分</span>
                    </div>
                  </div>
                </div>

                {/* 治理维度 */}
                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-lg font-semibold text-gray-900">治理维度</h3>
                    <div className="text-2xl font-bold text-purple-600">{esgScores.governance}分</div>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">公司治理</span>
                      <span className="text-sm font-medium">88分</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">风险管理</span>
                      <span className="text-sm font-medium">82分</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">透明度</span>
                      <span className="text-sm font-medium">85分</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">合规管理</span>
                      <span className="text-sm font-medium">85分</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 对标分析标签页 */}
          {activeTab === 'benchmarking' && (
            <div className="space-y-6">
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-4">行业对标分析</h3>
                <ResponsiveContainer width="100%" height={400}>
                  <BarChart data={benchmarks}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="company" />
                    <YAxis />
                    <Tooltip />
                    <Bar dataKey="environmental" fill="#10B981" name="环境" />
                    <Bar dataKey="social" fill="#3B82F6" name="社会" />
                    <Bar dataKey="governance" fill="#8B5CF6" name="治理" />
                  </BarChart>
                </ResponsiveContainer>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="bg-gray-50 rounded-lg p-6">
                  <h4 className="text-lg font-semibold text-gray-900 mb-4">对标结果分析</h4>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">与行业平均差距</span>
                      <span className="text-sm font-medium text-green-600">+6.7分</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">与标杆企业差距</span>
                      <span className="text-sm font-medium text-red-600">-6.0分</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">行业排名</span>
                      <span className="text-sm font-medium">前30%</span>
                    </div>
                  </div>
                </div>

                <div className="bg-gray-50 rounded-lg p-6">
                  <h4 className="text-lg font-semibold text-gray-900 mb-4">改进建议</h4>
                  <div className="space-y-3">
                    <div className="flex items-start space-x-2">
                      <CheckCircle className="w-4 h-4 text-green-600 mt-0.5" />
                      <span className="text-sm text-gray-600">加强环境管理体系建设</span>
                    </div>
                    <div className="flex items-start space-x-2">
                      <CheckCircle className="w-4 h-4 text-green-600 mt-0.5" />
                      <span className="text-sm text-gray-600">提升气候变化应对能力</span>
                    </div>
                    <div className="flex items-start space-x-2">
                      <CheckCircle className="w-4 h-4 text-green-600 mt-0.5" />
                      <span className="text-sm text-gray-600">完善供应链ESG管理</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 改进建议标签页 */}
          {activeTab === 'improvement' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 gap-6">
                {improvementAreas.map((area) => (
                  <div key={area.id} className="bg-white rounded-lg border border-gray-200 p-6">
                    <div className="flex items-center justify-between mb-4">
                      <div>
                        <h3 className="text-lg font-semibold text-gray-900">{area.dimension}</h3>
                        <p className="text-sm text-gray-600">当前评分: {area.currentScore}分 → 目标: {area.targetScore}分</p>
                      </div>
                      <span className={`px-3 py-1 text-sm font-medium rounded-full ${getPriorityColor(area.priority)}`}>
                        {getPriorityText(area.priority)}
                      </span>
                    </div>
                    
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                      <div>
                        <h4 className="font-medium text-gray-900 mb-3">改进措施</h4>
                        <ul className="space-y-2">
                          {area.actions.map((action, index) => (
                            <li key={index} className="flex items-start space-x-2">
                              <div className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
                              <span className="text-sm text-gray-600">{action}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                      
                      <div>
                        <h4 className="font-medium text-gray-900 mb-3">进度跟踪</h4>
                        <div className="space-y-3">
                          <div>
                            <div className="flex items-center justify-between text-sm mb-1">
                              <span className="text-gray-600">完成进度</span>
                              <span className="font-medium">60%</span>
                            </div>
                            <div className="w-full bg-gray-200 rounded-full h-2">
                              <div className="bg-green-600 h-2 rounded-full" style={{ width: '60%' }}></div>
                            </div>
                          </div>
                          <div className="text-sm text-gray-600">
                            <p>预计完成时间: 2024年12月</p>
                            <p>负责人: ESG管理团队</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* 报告标签页 */}
          {activeTab === 'reports' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <BarChart3 className="w-8 h-8 text-blue-600" />
                    <button className="text-blue-600 hover:text-blue-700">
                      <Download className="w-4 h-4" />
                    </button>
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">ESG评估报告</h3>
                  <p className="text-sm text-gray-600 mb-4">2024年Q2 ESG综合评估报告</p>
                  <div className="flex items-center text-sm text-gray-500">
                    <Calendar className="w-4 h-4 mr-1" />
                    2024-06-30
                  </div>
                </div>

                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <Target className="w-8 h-8 text-green-600" />
                    <button className="text-green-600 hover:text-green-700">
                      <Download className="w-4 h-4" />
                    </button>
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">对标分析报告</h3>
                  <p className="text-sm text-gray-600 mb-4">行业对标分析及改进建议</p>
                  <div className="flex items-center text-sm text-gray-500">
                    <Calendar className="w-4 h-4 mr-1" />
                    2024-06-30
                  </div>
                </div>

                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <TrendingUp className="w-8 h-8 text-purple-600" />
                    <button className="text-purple-600 hover:text-purple-700">
                      <Download className="w-4 h-4" />
                    </button>
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">改进计划报告</h3>
                  <p className="text-sm text-gray-600 mb-4">ESG改进措施及实施计划</p>
                  <div className="flex items-center text-sm text-gray-500">
                    <Calendar className="w-4 h-4 mr-1" />
                    2024-06-30
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default ESGEvaluationMain 